<template>
	<view>
		<top-nav title="视频列表"></top-nav>
		<view style="width: 100%;height: 96rpx;"></view>
		<view>
			<view class="video-con">
				<image src="../../static/images/ceshi.webp" class="video"></image>
				<image src="../../static/images/icon_video_stop.png" class="stop"></image>
			</view>
			<view class="video-text">
				<view class="t1 ellips">爱思唯尔新任CEO白可珊：坦诚、透明、开放、互信——携手为科学技术和世界可持续发展贡献力量携手</view>
				<view class="dianzan-con flex">
					<view class="zan-cases flex align-center">
						<image src="../../static/images/icon_zan_nor.png"></image>
						<text>999+</text>
					</view>
				</view>
				<view class="t2">
					当地时间2019年11月7日上午，爱思唯尔新任首席执行官白可珊（Kumsal Bayazit）女士在于美国南卡罗莱纳州举行的查尔斯顿图书馆会议上亮相，发表了
				</view>
				<view class="input-con flex">
					<view class="input-box">
						<input placeholder="说说您的见闻吧..." @focus="oninput" @blur="isinput" @keyboardheightchange='iptchange' placeholder-class="gray"/>
					</view>
					<view class="input-btn" @click="release" v-if="issend">
						<text>发布</text>
					</view>
					<view class="dianzan-con flex" v-else style="margin-top: unset;">
						<view class="zan-cases flex align-center">
							<!-- <image src="../../static/images/icon_zan_nor2.png"></image> -->
							<image src="../../static/images/icon_zan_nor1.png"></image>
							<text>109</text>
						</view>
					</view>
				</view>
			</view>
			<view class="comment-con">
				<view class="title flex align-center">
					<view class="line"></view>
					<text>用户评论</text>
				</view>
				<view class="cases" v-for="(item,index) in 4">
					<view class="t1">2021年9月16日</view>
					<view>在学术道路上爱思唯尔帮助了很多，有这么一个平台浏览内容学术内容很有用</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				issend:false
			};
		},
		methods:{
			oninput(){
				this.issend = true
			},
			isinput(){
				this.issend = false
			},
			iptchange(e){
				var inpheight = e.detail.height
				if(inpheight<80){
					this.issend = true
				}
			},
			release(){
				this.issend = false
			}
		}
	}
</script>
<style>page{background-color: #F7F7F7;}</style>
<style lang="scss" scoped>
.gray{
	color: #C0C1C1;
}
.video-con{
	position: relative;
	width: 100%;
	height: 420rpx;
	.video{
		width: 100%;
		height: 100%;
	}
	.stop{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: 96rpx;
		height: 96rpx;
	}
}
.video-text{
	padding: 32rpx 32rpx 0;
	background-color: #fff;
	.t1{
		font-size: 36rpx;
		font-weight: bold;
		-webkit-line-clamp:3;
	}
	.t2{
		color: #8C8C8C;
		font-size: 26rpx;
		margin-top: 18rpx;
	}
	.input-con{
		padding: 24rpx 0;
		.input-box{
			width: 500rpx;
			padding: 0 25rpx;
			height: 72rpx;
			background-color: #F7F7F7;
			border-radius: 50rpx;
			border: 1px solid rgba(240,240,240,1);
			
			input{
				font-size: 26rpx;
				height: 72rpx;
				line-height: 72rpx;
				width: 100%;
			}
		}
		.input-btn{
			color: rgba(2,122,255,1);
			font-size: 34rpx;
			font-weight: bold;
			line-height: 72rpx;
			text-align: center;
			flex: 1;
			text-indent: 20rpx;
		}
	}
	.dianzan-con{
		justify-content: flex-end;
		margin-top: 10rpx;
		color: #595959;
		font-size: 26rpx;
		.zan-cases{
			margin-left: 30rpx;
			image{
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}
		}
	}
}
.comment-con{
	padding: 0 32rpx 20rpx;
	.title{
		font-size: 40rpx;
		font-weight: bold;
		margin: 32rpx auto 16rpx;
		.line{
			width: 8rpx;
			height: 36rpx;
			background: #FFB851;
			border-radius: 4rpx;
			margin-right: 16rpx;
		}
	}
	.cases{
		background-color: #fff;
		padding: 16rpx 24rpx 24rpx;
		border-radius: 24rpx;
		margin-bottom: 16rpx;
		.t1{
			font-size: 26rpx;
			color: #8C8C8C;
			margin-bottom: 8rpx;
		}
	}
}
</style>
